<template>
    <div class="demo">
        <h1>{{ msg }}</h1>
        <h2>学生姓名:{{ name }}</h2>
        <h2>学生年龄:{{ age + 1 }}</h2>
        <button @click="changeAge">子组件收到props尝试修改其中的age</button>
        <h2>学生性别:{{ sex }}</h2>
    </div>
</template>

<script>
import Vue from 'vue';
export default Vue.extend({
    name: 'Student',
    data() {
        return {
            msg: "我是尚硅谷的一个学生",
            // props定义的属性不要写在data里，不然就写死了，别人就不能复用
            myAge:this.age //如果非要接收了数据但要修改，弄一个不一样的变量。因为props在vc上的优先级更高
        }
    },
    methods: {
        changeAge() {
            /* 
            控制台报错：
                [Vue warn]: Avoid mutating a prop directly since the value will be overwritten 
                whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. 
                Prop being mutated: "age"
            */
            this.age = 99
            alert("子组件收到的props最好不要修改！")

        }
    },
    // 1.简单接收
    // props:["name","age","sex"] //props接受到父传过来的值是文本的，如果age+1，就是181，而不是19

    // 2.接收数据：对数据进行类型限制
    // props: {
    //     name: String,
    //     // 如果类型不对，报错：Invalid prop: type check failed for prop "age". Expected Number with value 18, got String with value "18".
    //     age: Number, 
    //     sex: String,
    // }

    // 3.接收数据：限制类型+默认值指定+必要性限制
    props: {
        // 不管哪种props方式，都不能传 key，因为vue内部做标记了
        name: {
            type: String,
            required: true,
            default: "无名氏"
        },
        age: {
            type: Number,
            required: true,
        },
        sex: {
            type: String,
            required: true,
        },
    }
}) 
</script>

<style>
.demo {
    background-color: orange;
}
</style>